import { Asset2, Asset2Props } from '@/components/asset/asset2';
import { BarCountryChart } from '@/components/bar/barcountry';
import { LineProps, PieProps } from '@/components/chart.interface';
import { WorldChart } from '@/components/world/world';
import { Progress, WordCloud } from '@ant-design/charts';
import React from 'react';

import styles from './dashboard.css';
import { get } from './httputil';
import { LineChart } from '@/components/line';
import { CircularChart } from '@/components/pie/circular';

export interface Asset {
  company: string;
  asset: number;
  risk: number;
}

type LinePropsExt = LineProps & { count?: number };

export interface DashboardState {
  assetAll: Asset2Props;
  assetBug: Asset2Props;
  assetCountry: LineProps;
  assetTable: object[];
  container: LineProps;
  wordcloud: { name: string; value: number }[];
  assets: Asset[];
  assetDomainName: LinePropsExt;
  assetIp: LinePropsExt;
  assetPort: LinePropsExt;
  assetComponent: LinePropsExt;
  risk: PieProps;
}

export default class Dashboard extends React.Component<{}, DashboardState> {
  constructor(props: any) {
    super(props);

    this.state = {
      assetAll: {},
      assetBug: {},
      assetCountry: {},
      assetTable: [],
      container: {},
      wordcloud: [],
      assets: [],
      assetDomainName: {},
      assetIp: {},
      assetPort: {},
      assetComponent: {},
      risk: {}
    };
  }
  componentDidMount() {
    get('/api/asset/all').then(res => this.setState({ assetAll: { ...res } }));
    get('/api/asset/bug').then(res => this.setState({ assetBug: { ...res, color: 'rgb(232, 103, 45)' } }));
    get('/api/asset/country').then(res => this.setState({ assetCountry: { ...res } }));
    get('/api/asset/table').then(res => this.setState({ assetTable: [...res] }));
    get('/api/web/container').then(res => this.setState({ container: { ...res } }));
    get('/api/wordcloud').then(res => this.setState({ wordcloud: [...res] }));
    get('/api/asset/company').then(res => this.setState({ assets: [...res] }));
    get(`/api/dashboard/asset/domainname`).then(response => this.setState({ assetDomainName: { ...response, height: '75px', ySplitLine: false, xAxisShow: false } }));
    get(`/api/dashboard/asset/ip`).then(response => this.setState({ assetIp: { ...response, height: '75px', ySplitLine: false, xAxisShow: false } }));
    get(`/api/dashboard/asset/port`).then(response => this.setState({ assetPort: { ...response, height: '75px', ySplitLine: false, xAxisShow: false } }));
    get(`/api/dashboard/asset/component`).then(response => this.setState({ assetComponent: { ...response, height: '75px', ySplitLine: false, xAxisShow: false } }));
    get(`/api/risk`).then(response => this.setState({ risk: { ...response, showLegend: false } }));
  }

  cardBottom = (title: string, subTitle: string, title2: string, data: LinePropsExt) => (
    <div className={styles.bottomCard}>
      <div className={styles.bottomTitle}>
        <p>{title}</p>
        <p>{subTitle}</p>
      </div>
      <div className={styles.bottomTitleNum}>
        <p>{title2}</p>
        <p>{data.count?.toLocaleString()}<span>万</span></p>
      </div>
      <div className={styles.bottomPic}>
        右上角图宽72px 高72px
    </div>
      <div className={styles.bottomChart}>
        <LineChart {...data}></LineChart>
      </div>
    </div>
  )

  render() {
    const config = {
      height: 20,
      width: 300,
      autoFit: false,
      percent: 0.7,
      barWidthRatio: 0.3,
      progressStyle: (params: any) => {
        if (params.type === 'current') {
          return { fill: 'rgb(34, 90, 246)' };
        }
        return {
          fill: 'rgb(25,32,44)',
          stroke: '#333',
        };
      },
    };
  
    const configWord = {
      data: this.state.wordcloud,
      height: 150,
      width: 200,
      autoFit: false,
      wordField: 'name',
      weightField: 'value',
      wordStyle: {
        fontFamily: 'Verdana',
        fontSize: [8, 32] as any,
      },
    };

    const { assetDomainName, assetIp, assetPort, assetComponent, assetAll, assetBug, assetCountry, risk, assetTable, container, assets } = this.state;

    return (
      <>
        <div className={styles.normal}>
          <div className={styles.left}>
            <div className={styles.assetTitle}>
              <div>白泽全平台资产统计</div>
              <div className={styles.assetSubTitle}>Baize full paltform asset statistics</div>
            </div>
            <div className={styles.assetStatistics}>
              <div className={styles.percent40}>
                <div className={styles.percent50}>
                  <Asset2 {...assetAll}></Asset2>
                </div>
                <div className={styles.percent50}>
                  <Asset2 {...assetBug}></Asset2>
                </div>
              </div>
              <div className={styles.percent60}>
                <BarCountryChart {...assetCountry}></BarCountryChart>
              </div>
            </div>
            <div className={styles.row}>
              <table className={styles.table}>
                <tbody>
                  {assetTable.map((row: any, index: number) => (
                    <tr className={`${index % 2 === 0 ? styles.tr : ''}`} key={index}>
                      <td className={styles.tabledate}>{row.date}</td>
                      <td className={styles.tablecompany}>{row.company}</td>
                      <td className={styles.tablecompany}>{row.city}</td>
                      <td className={styles.tablevalue}>{row.ip}</td>
                      <td className={styles.tablecompany}>{row.vendor}</td>
                      <td className={styles.tablecompany}>{row.msg}</td>
                      <td className={styles.tableport}>{row.port}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className={styles.row}>
              <div className={styles.containerWeb}>
                <div className={styles.containerTitle}>Web容器</div>
                {container.categories?.map((el, index) => (
                  <div key={index}>
                    <div className={styles.containerItemTitle}>
                      {index + 1}&nbsp;&nbsp;{el}
                    </div>
                    <div>
                      <Progress {...config} />
                    </div>
                  </div>
                ))}
              </div>
              <div className={styles.percent40}>
                <WordCloud {...configWord}></WordCloud>
              </div>
            </div>
          </div>
          <div className={styles.center}>
            <WorldChart></WorldChart>
          </div>
          <div className={styles.right}>
            {assets.map(asset => (
              <div className={styles.card} key={asset.company}>
                <div className={styles.titleRight}>{asset.company}</div>
                <div className={styles.item}>
                  <div className={styles.itemAsset}>资产</div>
                  <div className={styles.itemValue}>{asset.asset.toLocaleString()}</div>
                </div>
                <div className={styles.item}>
                  <div className={styles.itemAsset}>风险资产</div>
                  <div className={styles.itemValue2}>{asset.risk.toFixed(1)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className={styles.bottom}>
          {this.cardBottom('域名资产统计', 'Domain name asset statistics', '域名统计', assetDomainName)}
          {this.cardBottom('IP资产统计', 'IP asset statistics', 'IP统计', assetIp)}
          {this.cardBottom('端口资产', 'Port assets', '端口统计', assetPort)}
          {this.cardBottom('组件及服务资产', 'Components and services asset', '组件及服务统计', assetComponent)}
          <div className={styles.bottomCardRight}>
            <div className={styles.bottomLeft}>
              <div>
                <div>
                  <span>正常资产</span>
                  <div>
                    <Progress {...config} />
                  </div>
                </div>
                <div>
                  <span>被篡改资产</span>
                  <div>
                    <Progress {...config} />
                  </div>
                </div>
                <div>
                  <span>可疑资产</span>
                  <div>
                    <Progress {...config} />
                  </div>
                </div>
              </div>
              <div className={styles.bottomTable}>
                <table>
                  <tbody>
                    <tr>
                      <td>最高人民检察院</td>
                      <td>112.57.190.140:80页面篡改</td>
                      <td>99.7%</td>
                    </tr>
                    <tr>
                      <td>最高人民检察院</td>
                      <td>112.57.190.140:80页面篡改</td>
                      <td>99.7%</td>
                    </tr>
                    <tr>
                      <td>最高人民检察院</td>
                      <td>112.57.190.140:80页面篡改</td>
                      <td>99.7%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className={styles.bottomCircularChart}>
              <CircularChart {...risk}></CircularChart>
              <p className={styles.bottomCircularCharP}>分布占比</p>
            </div>
            <div className={styles.bottomProgressV}>
              <div>
                <div className={styles.loadbar}>
                  <strong className={styles.bar} style={{height: '30%'}}></strong>
                  <span>挂马</span>
                </div>
              </div>
              <div>
                <div className={styles.loadbar}>
                  <strong className={styles.bar} style={{height: '30%'}}></strong>
                  <span>暗链</span>
                </div>
              </div>
              <div>
                <div className={styles.loadbar}>
                  <strong className={styles.bar} style={{height: '30%'}}></strong>
                  <span>黑页</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}
